<template>
  <div style="padding: 20px" ref="bigbox">
    <div class="main">
      <div class="tabTop">
        <div class="left">
          <span :class="tabBar == 0 ? 'act' : ''" @click="choTab(0)">全部</span>
          <span :class="tabBar == 3 ? 'act' : ''" @click="choTab(3)"
            >等待发货</span
          >
          <span :class="tabBar == 4 ? 'act' : ''" @click="choTab(4)"
            >已发货</span
          >
          <span :class="tabBar == 5 ? 'act' : ''" @click="choTab(5)"
            >退款中</span
          >
          <span :class="tabBar == 6 ? 'act' : ''" @click="choTab(6)"
            >退货成功订单</span
          >
          <span :class="tabBar == 7 ? 'act' : ''" @click="choTab(7)"
            >已完成订单</span
          >
        </div>
        <div class="right">
          <div class="search">
            <el-input
              size="medium"
              placeholder="请输入订单号搜索"
              v-model="searchText"
            >
            </el-input>
          </div>
          <el-date-picker
            v-model="choDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
          <el-button
            type="primary"
            style="margin-left: 15px"
            size="medium"
            @click="search"
            >查询</el-button
          >
        </div>
      </div>
      <div class="table">
        <div class="tTop">
          <span>商品信息</span>
          <span>单价</span>
          <span>数量</span>
          <span>买家</span>
          <span>订单状态</span>
          <span>实收款</span>
          <span>评价</span>
          <span>操作</span>
        </div>
        <div class="ul">
          <div class="none" v-if="tableDate.length <= 0">暂无数据</div>
          <div class="li" v-for="(item, index) in tableDate" :key="index">
            <div class="liTop">
              <!-- v-model="checked" -->
              <!-- <el-checkbox></el-checkbox> -->
              <span>订单号：{{ item.orderSn }}</span>
              <span>创建时间：{{ item.createAt }}</span>
            </div>
            <div class="cont">
              <div class="td com">
                <img :src="item.imgurl" />
                <div class="comright">
                  <p class="name">{{ item.goodsName }}</p>
                  <p class="spec">规格：{{ item.specName }}</p>
                </div>
              </div>
              <div class="td text1">￥{{ item.price }}</div>
              <div class="td text1">{{ item.total }}</div>
              <div class="td text1">{{ item.userName }}</div>
              <div class="td type">
                <p>{{ item.statusText }}</p>
                <p
                  class="send"
                  v-if="item.status == 3"
                  @click="sendSub(item.id)"
                >
                  发货
                </p>
                <p class="send2" v-else-if="item.status == 5">
                  <span @click="refund(1, item.id)">同意</span>
                  <span @click="refund(2, item.id)">拒绝</span>
                </p>
                <p class="send sended" v-else>已发货</p>
              </div>
              <div class="td money">
                <p>￥{{ item.payment }}</p>
                <p>含快递：￥{{ item.postFee }}</p>
              </div>
              <div class="td">
                <div class="evl" v-if="item.coment == 0">未评价</div>
                <div class="evl evled" v-else>已评价</div>
              </div>
              <div class="td set">
                <span @click="setdetail(index)">详情</span>
                <span
                  v-if="item.status !== 3 && item.status !== 5"
                  @click="wuliuInfo = true"
                  >物流</span
                >
                <span @click="rsetAds(index)" v-if="item.status == 3"
                  >修改</span
                >
                <span @click="orderInfo(item.id)">订单信息</span>
              </div>
            </div>
          </div>
          <div class="page">
            <div class="footLeft">
              <!-- <el-checkbox>全选</el-checkbox>
              <div class="allsend">批量发货</div>
              <div class="exc">导出Excel</div> -->
            </div>
            <div>
              <el-pagination
                background
                @current-change="changePage"
                :current-page.sync="page"
                :page-size="pageSize"
                layout="total,prev,pager,next,jumper"
                :total="total"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="orderpop">
      <!-- 发货弹框 -->
      <div class="sendpop">
        <el-dialog title="发货" :visible.sync="sendpop" width="30%">
          <el-form label-width="100px" :model="sendform">
            <el-form-item label="物流名称">
              <el-select v-model="sendform.region" placeholder="请选择物流名称">
                <el-option
                  :label="item.name"
                  v-for="item in logList"
                  :key="item.id"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="物流单号">
              <el-input
                v-model="sendform.name"
                placeholder="请输入物流单号"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="sendSubmit(sendform)"
                >确 定</el-button
              >
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <!-- 详情弹框 -->
      <div class="detailpop">
        <el-dialog title="详情" :visible.sync="detailpop" width="30%">
          <el-form label-width="120px" :model="detailform">
            <el-form-item label="商品图片">
              <img :src="detailform.img" class="tu" />
            </el-form-item>
            <el-form-item label="商品名称">
              <el-input v-model="detailform.name" disabled></el-input>
            </el-form-item>
            <el-form-item label="规格">
              <el-input v-model="detailform.spec" disabled></el-input>
            </el-form-item>
            <el-form-item label="商品数量">
              <el-input v-model="detailform.num" disabled></el-input>
            </el-form-item>
            <el-form-item label="单价">
              <el-input v-model="detailform.price" disabled></el-input>
            </el-form-item>
            <el-form-item label="总价">
              <el-input v-model="detailform.totalprice" disabled></el-input>
            </el-form-item>
            <el-form-item label="留言">
              <el-input
                type="textarea"
                v-model="detailform.evl"
                disabled
              ></el-input>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <!-- 修改弹框 -->
      <div class="setpop">
        <el-dialog title="修改" :visible.sync="setpop" width="30%">
          <el-form label-width="100px" :model="setform">
            <el-form-item label="收件人">
              <el-input
                v-model="setform.name"
                placeholder="请输入收件人"
              ></el-input>
            </el-form-item>
            <el-form-item label="电话">
              <el-input
                v-model="setform.phone"
                placeholder="请输入联系电话"
              ></el-input>
            </el-form-item>
            <el-form-item label="地区">
              <el-cascader
                placeholder="请选择地区"
                :options="options"
                v-model="setform.provinceCityArea"
                @change="changeCity"
                clearable
              ></el-cascader>
            </el-form-item>
            <el-form-item label="地址">
              <el-input
                v-model="setform.address"
                placeholder="请输入详细地址"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="setSubmit(setform)"
                >确 定</el-button
              >
              <el-button @click="setpop = false">取 消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <!-- 订单信息弹框 -->
      <div class="oidinfopop">
        <el-dialog title="订单信息" :visible.sync="oidinfopop" width="30%">
          <el-form label-width="120px" :model="oidinfoform">
            <el-form-item label="订单号">
              <el-input v-model="oidinfoform.num" disabled></el-input>
            </el-form-item>
            <el-form-item label="订单总额">
              <el-input v-model="oidinfoform.total" disabled></el-input>
            </el-form-item>
            <el-form-item label="运费金额">
              <el-input v-model="oidinfoform.postfee" disabled></el-input>
            </el-form-item>
            <el-form-item label="订单时间">
              <el-input v-model="oidinfoform.ordertime" disabled></el-input>
            </el-form-item>
            <el-form-item label="发货时间">
              <el-input v-model="oidinfoform.sendtime" disabled></el-input>
            </el-form-item>
            <el-form-item label="付款时间">
              <el-input v-model="oidinfoform.paytime" disabled></el-input>
            </el-form-item>
            <el-form-item label="物流单号">
              <el-input v-model="oidinfoform.logistics" disabled></el-input>
            </el-form-item>
            <el-form-item label="买家留言">
              <el-input
                type="textarea"
                v-model="detailform.evl"
                disabled
              ></el-input>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>

      <!-- 物流信息弹框 -->
      <div class="wuliu">
        <el-dialog title="物流信息" :visible.sync="wuliuInfo" width="30%">
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import arr from "../../assets/js/districts";
export default {
  data() {
    return {
      wuliuInfo: false,
      tabBar: 0,
      choDate: ["", ""], // 选择的日期
      searchText: "", // 搜索内容
      tableDate: [], // 表单的数据
      total: 0,
      page: 1,
      pageSize: 10,
      sendpop: false,
      sendform: {
        name: "",
        region: "",
      },
      detailpop: false,
      detailform: {}, // 详情表单
      setpop: false,
      options: [], // 省市区
      selectedOptions: [],
      cityArr: [], // 城市列表
      areaArr: [], // 区县列表
      setform: {}, // 修改地址表单
      oidinfopop: false,
      oidinfoform: {}, // 订单详情表单
      logList: [],
      sendId: "", // 发货的订单id
    };
  },
  mounted() {
    this.getOrderList();
    this.initDistPicker(); // 初始化选择器
    this.getlog();
  },
  methods: {
    // 选择订单状态
    choTab(e) {
      this.tabBar = e;
      this.getOrderList();
    },
    // 获取订单列表
    getOrderList() {
      if (!this.choDate) {
        this.choDate = ["", ""];
      }
      this.$postRequest("/mall/orderOrder/list", {
        shopId: sessionStorage.getItem("shopId"),
        orderSn: this.searchText,
        status: this.tabBar,
        beginAt: this.choDate[0],
        endAt: this.choDate[1],
        pageNum: this.page,
        pageSize: this.pageSize,
      }).then((res) => {
        this.total = res.total;
        for (var i = 0; i < res.rows.length; i++) {
          res.rows[i].createAt = this.$util.gettime(
            new Date(res.rows[i].createAt)
          );
          if (res.rows[i].status == 1) {
            res.rows[i].statusText = "待支付";
          } else if (res.rows[i].status == 3) {
            res.rows[i].statusText = "待发货";
          }
          if (res.rows[i].status == 4) {
            res.rows[i].statusText = "待收货";
          }
          if (res.rows[i].status == 5) {
            res.rows[i].statusText = "退货中";
          }
          if (res.rows[i].status == 6) {
            res.rows[i].statusText = "退货成功";
          }
          if (res.rows[i].status == 7) {
            res.rows[i].statusText = "订单完成";
          }
          if (res.rows[i].status == 8) {
            res.rows[i].statusText = "订单取消";
          }
        }
        this.tableDate = res.rows;
      });
    },
    // 详情按钮
    setdetail(index) {
      this.detailpop = true;
      this.detailform = {
        img: this.tableDate[index].imgurl,
        name: this.tableDate[index].goodsName,
        spec: this.tableDate[index].specName,
        num: this.tableDate[index].total,
        price: this.tableDate[index].price,
        totalprice: this.tableDate[index].allPrice,
        evl: this.tableDate[index].buyerMsg,
      };
    },
    // 修改按钮
    rsetAds(index) {
      this.setpop = true;
      this.setform = {
        id: this.tableDate[index].id,
        name: this.tableDate[index].receiverName,
        phone: this.tableDate[index].receiverPhone,
        address: this.tableDate[index].receiverAddress,
        provinceCityArea: [],
        province: this.tableDate[index].receiverProvince,
        city: this.tableDate[index].receiverCity,
        area: this.tableDate[index].receiverCounty,
      };
      // 转换省市区码
      this.isCity();
    },
    // 提交修改
    setSubmit(e) {
      this.$postRequest("/mall/orderOrder/editAddress", {
        orderId: e.id,
        shopId: sessionStorage.getItem("shopId"),
        receiverName: e.name,
        receiverPhone: e.phone,
        receiverProvince: e.province,
        receiverCity: e.city,
        receiverCounty: e.area,
        receiverAddress: e.address,
      }).then((res) => {
        this.$message.success("修改成功");
        this.getOrderList();
        this.setpop = false;
      });
    },
    // 获取订单详情
    orderInfo(id) {
      this.$getRequest("/mall/orderOrder/" + id, {}).then((res) => {
        this.oidinfoform = {
          num: res.data.orderSn,
          total: res.data.payment,
          postfee: res.data.postFee,
          ordertime: res.data.createAt
            ? this.$util.gettime(new Date(res.data.createAt))
            : "",
          sendtime: res.data.consignAt
            ? this.$util.gettime(new Date(res.data.consignAt))
            : "",
          paytime: res.data.payAt
            ? this.$util.gettime(new Date(res.data.payAt))
            : "",
          logistics: res.data.shippingCode,
          msg: res.data.buyerMsg,
        };
        this.oidinfopop = true;
      });
    },
    // 获取物流名称表
    getlog() {
      this.$postRequest("/mall/shopExpressCode/list", {}).then((res) => {
        this.logList = res.data;
      });
    },
    // 提交发货
    sendSubmit(e) {
      if (e.name == "" || e.region == "") {
        this.$message.error("请将内容补充完整");
      } else {
        this.$postRequest("/mall/orderOrder/deliverGoods", {
          shippingName: e.region,
          shippingCode: e.name,
          shopId: sessionStorage.getItem("shopId"),
          orderId: this.sendId,
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success("发货成功");
            this.getOrderList();
            this.sendpop = false;
          }
        });
      }
    },
    // 发货
    sendSub(id) {
      this.sendId = id;
      this.sendpop = true;
      this.sendform = { name: "", region: "" };
    },
    // 同意/拒绝
    refund(e, id) {
      var tip = "";
      if (e == 1) {
        tip = "同意";
      } else {
        tip = "拒绝";
      }
      this.$confirm("是否" + tip + "退货?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$postRequest("/mall/orderOrder/back", {
            shopId: sessionStorage.getItem("shopId"),
            check: e,
            orderId: id,
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("操作成功");
              this.getOrderList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    // 分页
    changePage(val) {
      this.page = val;
      this.getOrderList();
      this.$refs.bigbox.parentElement.scrollTo(0, 0);
    },
    // 搜索框
    search() {
      this.getOrderList();
    },
    // 初始化选择器
    initDistPicker() {
      let distData = arr.arr;
      let options = [];
      // 省
      for (var provinceKy in distData["100000"]) {
        let optProvinceItem = {
          value: provinceKy,
          label: distData["100000"][provinceKy],
        };
        if (distData[provinceKy]) {
          // 市
          for (var cityKy in distData[provinceKy]) {
            optProvinceItem.children = optProvinceItem.children
              ? optProvinceItem.children
              : [];
            let optCityItem = {
              value: cityKy,
              label: distData[provinceKy][cityKy],
            };
            if (distData[cityKy]) {
              // 区
              for (var areaKy in distData[cityKy]) {
                optCityItem.children = optCityItem.children
                  ? optCityItem.children
                  : [];
                let optAreaItem = {
                  value: areaKy,
                  label: distData[cityKy][areaKy],
                };
                optCityItem.children.push(optAreaItem);
              }
            }
            optProvinceItem.children.push(optCityItem);
          }
        }
        options.push(optProvinceItem);
      }
      this.distData = distData;
      this.options = options;
    },
    // 切换城市
    changeCity(value) {
      this.options.map((item, index) => {
        if (item.value == value[0]) {
          this.cityArr = item.children; //存储城市列表
          this.setform.province = item.label;
        }
      });
      //获取市名
      this.cityArr.map((item, index) => {
        if (item.value == value[1]) {
          this.areaArr = item.children; //存储区县列表
          this.setform.city = item.label;
        }
      });
      //获取区县名
      this.areaArr.map((item, index) => {
        if (item.value == value[2]) {
          this.setform.area = item.label;
        }
      });
    },
    // 判断是否有城市(有的话转码)
    isCity() {
      this.options.map((item, index) => {
        if (item.label == this.setform.province) {
          this.cityArr = item.children; //存储城市列表
          this.setform.provinceCityArea[0] = item.value;
        }
      });
      //获取市名
      this.cityArr.map((item, index) => {
        if (item.label == this.setform.city) {
          this.areaArr = item.children; //存储区县列表
          this.setform.provinceCityArea[1] = item.value;
        }
      });
      //获取区县名
      this.areaArr.map((item, index) => {
        if (item.label == this.setform.area) {
          this.setform.provinceCityArea[2] = item.value;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import url("../../assets/css/orderpop.css");
/deep/ .el-cascader .el-input .el-input__inner {
  width: 400px;
}
.main {
  background: #fff;
}
.tabTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding-right: 20px;
  font-size: 16px;
  .left {
    display: flex;
    span {
      width: 100px;
      line-height: 60px;
      text-align: center;
      font-size: 14px;
      border-bottom: 2px solid transparent;
      cursor: pointer;
      transition: 0.2s;
    }
    .act {
      color: #1a69e0;
      border-bottom: 2px solid #1a69e0;
    }
    span:hover {
      color: #1a69e0;
      border-bottom: 1px solid #1a69e0;
    }
  }
  .right {
    display: flex;
    align-items: center;
    .search {
      width: 240px;
      margin-right: 20px;
    }
  }
}
.table {
  margin: 20px;
  .tTop {
    height: 40px;
    background: #f9f9f9;
    border: 1px solid #eeeeee;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 12px;
    span {
      width: 11%;
      text-align: center;
    }
    span:nth-of-type(1) {
      width: 22%;
    }
  }
  .ul {
    .none {
      text-align: center;
      line-height: 200px;
      color: #999;
      font-size: 12px;
    }
    .li {
      margin-top: 20px;
      .liTop {
        height: 40px;
        background: #f3f7fd;
        display: flex;
        align-items: center;
        padding: 0 20px;
        > span {
          font-size: 12px;
          margin: 0 10px;
        }
        > span:nth-of-type(1) {
          margin-right: 100px;
        }
      }
      .cont {
        height: 120px;
        border: 1px solid #eeeeee;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .td {
          box-sizing: border-box;
          width: 11%;
          text-align: center;
          padding: 0 5px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        .td:nth-of-type(1) {
          width: 22%;
        }
        .com {
          display: flex;
          align-items: center;
          justify-content: space-between;
          text-align: left;
          img {
            height: 60px;
            width: 60px;
          }
          .comright {
            width: calc(100% - 68px);
            font-size: 12px;
            .name {
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
            }
            .spec {
              color: #999;
              margin-top: 10px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
        .text1 {
          font-size: 12px;
        }
        .type {
          font-size: 12px;
          p:nth-of-type(1) {
            color: #ec6941;
          }
          .send {
            width: 60px;
            height: 23px;
            background: #1a69e0;
            color: #fff;
            text-align: center;
            line-height: 25px;
            margin: 5px auto 0 auto;
            cursor: pointer;
          }
          .send2 {
            span {
              margin: 5px 5px 0 5px;
              display: inline-block;
              height: 23px;
              line-height: 25px;
              width: 45px;
              text-align: center;
              cursor: pointer;
              color: #fff;
              &:nth-of-type(1) {
                background: rgb(62, 170, 62);
              }
              &:nth-of-type(2) {
                background: rgb(223, 107, 53);
              }
            }
          }
          .sended {
            background: #87ace4;
          }
        }
        .money {
          font-size: 12px;
          p:nth-of-type(1) {
            color: #d94511;
          }
          p:nth-of-type(2) {
            color: #999;
          }
        }
        .evl {
          width: 60px;
          height: 25px;
          background: #f3f7fe;
          border: 1px solid #1a69e0;
          color: #1a69e0;
          line-height: 25px;
          text-align: center;
          font-size: 12px;
          margin: 0 auto;
        }
        .evled {
          background: #e6fde8;
          border: 1px solid #00c431;
          color: #00c431;
        }
        .set {
          font-size: 12px;
          color: #666;
          line-height: 25px;
          span {
            cursor: pointer;
            display: block;
          }
          span:hover {
            color: #1a69e0;
          }
        }
      }
    }
    .page {
      display: flex;
      justify-content: space-between;
      padding: 20px;
      .footLeft {
        display: flex;
        align-items: center;
        .allsend {
          width: 80px;
          height: 28px;
          background: rgba(6, 85, 206, 0.05);
          border: 1px solid #1a69e0;
          text-align: center;
          line-height: 28px;
          font-size: 12px;
          color: #1a69e0;
          cursor: pointer;
          margin: 0 20px;
        }
        .exc {
          cursor: pointer;
          width: 80px;
          height: 30px;
          background: #0655ce;
          font-size: 12px;
          color: #fff;
          text-align: center;
          line-height: 30px;
        }
      }
    }
    /deep/
      .page
      .el-pagination.is-background
      .el-pager
      li:not(.disabled).active {
      background: #1a69e0;
    }
  }
}
</style>